<!-- @ 批量录入 -->
<template>
	<view style="min-height: 100vh;" class="padding-bottom">
		<u-notifyLyt ref="uNotifyLyt" />
		<view class="margin-sm ">
			<uni-card padding="0" :is-shadow="false"
				style="position:relative;padding:0px !important;margin: 0px !important;">
				<view class="flex" style="height: 76rpx;position: absolute;left: 0px;top:0px;width: 100%;">
					<view class="flex justify-between solid-bottom align-center"
						style="width:100%;height: 70rpx;overflow: hidden;">
						<view class="flex solid-bottom">
							<view class="padding-sm bg-blue2" style="border-radius: 6px 0px 0px 0px;">新增线索</view>
							<view
								style="width: 0; height: 0; border-top: 76rpx solid transparent;border-left: 35rpx solid #013E8E;">
							</view>
						</view>
						<view class="margin-right-sm cu-btn round " :class="disabled?'bg-gray':'bg-blue2'"
							@click="handeAdd">添加</view>
					</view>
				</view>
				<view class="padding-tb-xs padding-bottom-sm padding-lr-sm" style="margin-top:70rpx">
					<uni-forms ref="valiForm" :rules="rulesFrom" :modelValue="model" labelWidth="375px"
						label-position="top">
						<uni-forms-item label="客户姓名" required name="customerName">
							<uni-easyinput v-model="model.customerName" placeholder="请输入姓名" />
						</uni-forms-item>
						<uni-forms-item label="手机号" required name="phone">
							<uni-easyinput v-model="model.phone" type="number" :maxlength="11" placeholder="请输入年龄" />
						</uni-forms-item>
						<uni-forms-item label="地址">
							<uni-easyinput v-model="model.address" placeholder="请输入地址" />
						</uni-forms-item>
					</uni-forms>
				</view>
			</uni-card>
		</view>
		<view class="margin-sm">
			<uni-card :is-shadow="false"
				style="position:relative;padding:0px !important;margin: 0px !important;border-radius: 15rpx;min-height: 50vh;">
				<view class="flex solid-bottom" style="height: 70rpx;position: absolute;left: 0px;top:0px">
					<view class="padding-sm bg-blue2" style="border-radius: 6px 0px 0px 0px;">
						本次添加记录{{`${dataSource.length>0?`(${dataSource.length}条)`:''}`}}</view>
					<view
						style="width: 0; height: 0; border-top: 70rpx solid transparent;border-left: 35rpx solid #013E8E;">
					</view>
				</view>
				<view class="padding-xs padding-tb-sm" style="margin-top:60rpx">
					<view v-for="(item,index) in dataSource" class="margin-xs" v-if="dataSource.length>0">
						<uni-card :is-shadow="false" style="padding:0 !important" margin="0" padding='0'>
							<view slot="title" class="flex align-center justify-between padding-xs">
								<view class="flex align-center justify-between" style="width: 100%;">
									<view class="flex align-center padding-right-sm">
										<view class="padding-right-sm">
											<u-badge type="success" max="99999" :value="index+1"></u-badge>
										</view>
										<view class="flex flex-direction">
											<view class="text-df">
												 <image src="/static/user.png" class="cu-avatarP110 margin-right-xs" />{{item.customerName?item.customerName:''}}
											</view>
											<view class="text-df">
												<image src="/static/phone.png" class="cu-avatarP110 margin-right-xs" /> {{item.phone?item.phone:''}}
											</view>
										</view>
									</view>
									<view>{{handItyCard(item.address)}}</view>
								</view>
							</view>
						</uni-card>
					</view>
					<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" />
				</view>
			</uni-card>
		</view>
	</view>
</template>
<script>
	import myApi from '@/utils/app.js' //调用接口使用
	export default {
		name: 'NewClue',
		components: {

		},
		data() {
			return {
				dataSource: [],
				model: {},
				disabled: false,
				rulesFrom: {
					customerName: {
						rules: [{
							required: true,
							errorMessage: '客户姓名不能为空'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '手机号码不能为空'
						}, {
							pattern: /^1[3-9]\d{9}$/,
							errorMessage: '请输入正确的手机号码格式'
						}]
					},
				},
			}
		},
		computed: {
			handItyCard() {
				return function(text) {
					return text.length > 10 ? text.substring(0, 7) + '...' : text;
					}
				}
			},
			
		onLoad() {},
		methods: {
			onNotify(round) { // 提示text
				this.$refs.uNotifyLyt.show({
					type: round.type ? round.type : 'success',
					message: round.message ? round.message : '操作失败',
					top: 150
				})
			},

			handeCancel(index) { //删除
				const that = this
				uni.showModal({
					title: '提示',
					content: `确定要删除这条信息吗？`,
					success: function(res) {
						console.log(res)
						if (res.confirm) {
							that.dataSource.splice(index, 1)
						}
					},
				})
			},
			handeAdd() {
				if (this.disabled) return
				this.$refs.valiForm.validate()
					.then(res => {
			
						this.handBmsClue()
					})
					.catch(err => {
						this.onNotify({
							type: 'error',
							message: err[0].errorMessage
						})
					})
			},
			async handBmsClue() {
				this.disabled = true
				try {
					const res = await this.$request({
						url: myApi.bmsClueAdd,
						method: 'get',
						data: this.model,
					});
					console.log(res)
					if (res.code == 200) {
						this.onNotify({
							message: '操作成功'
						})
						this.dataSource.unshift(this.model)
						this.model ={}
					}
				} catch (e) {
					// 失败执行

				} finally {
					// 销毁执行
					this.disabled = false
				}
			},
		}
	}
</script>
<style lang="scss" scoped>

</style>